<template>
  <div>
    <a-tree-select
      v-model:value="value"
      tree-data-simple-mode
      style="width: 100%"
      :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
      :tree-data="treeData"
      placeholder="请选择"
      :load-data="onLoadData"
    />
  </div>
</template>

<script>
  import { TreeSelect } from 'ant-design-vue'
  import { GetDict } from '@/api/dictionary/api'
  export default {
    components: { ATreeSelect: TreeSelect },
    data() {
      return {
        treeData: [],
      }
    },
    props: {
      value: {
        type: String,
        default: '',
      },
      data: {
        type: Array,
        default: null,
      },
    },
    watch: {
      value(val) {
        this.$emit('update:value', val)
      },
    },
    created() {
      this.treeData = this.data
    },
    methods: {
      onLoadData(treeNode) {
        return new Promise((resolve) => {
          setTimeout(() => {
            GetDict({ id: treeNode.eventKey, bChild: true }).then((res) => {
              if (res.isSuccess && res.content.children.length > 0) {
                console.log(res)
                res.content.children.forEach((element) => {
                  this.treeData.push({
                    title: element.name,
                    id: element.id,
                    pId: treeNode.eventKey,
                    value: element.id,
                    isLeaf: element.count === 0,
                  })
                })
              }
            })

            resolve()
          }, 300)
        })
      },
    },
  }
</script>
